'use client';

import { useState, useEffect } from 'react';
import { useSession } from 'next-auth/react';
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Zap } from 'lucide-react';

function useCreditBalance() {
  const { data: session } = useSession();
  const [credits, setCredits] = useState(null);

  useEffect(() => {
    async function fetchCredits() {
      if (session?.user) {
        try {
          const response = await fetch('/api/user/credits');
          const data = await response.json();
          setCredits(data.credits);
        } catch (error) {
          console.error('获取积分失败:', error);
        }
      }
    }

    fetchCredits();
  }, [session]);

  return credits;
}

export default function CreditBalance({ credits }) {
  const { data: session } = useSession();

  if (!session) {
    return (
      <Card className="bg-gray-100 text-gray-500">
        <CardContent className="p-4">
          <div className="flex items-center justify-between">
            <span className="text-lg font-bold">请登录查看积分</span>
          </div>
          <Button variant="outline" className="w-full mt-4">
            登录
          </Button>
        </CardContent>
      </Card>
    );
  }

  return (
    <Card className="bg-gradient-to-r from-purple-500 to-pink-500 text-white">
      <CardContent className="p-4">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Zap className="w-6 h-6" />
            <span className="text-lg font-bold">积分余额</span>
          </div>
          <span className="text-2xl font-bold">{credits}</span>
        </div>
        <Button variant="outline" className="w-full mt-4 text-white border-white hover:bg-white hover:text-purple-500">
          充值
        </Button>
      </CardContent>
    </Card>
  );
}